How to Optimize Page Load Time
Page load time is the measurement of how fast it takes for content on a web page to load.
How do You Measure Page Load Time?
There are two ways to measure page speed:
- Page load time: This is the amount of time that passes between the browser sending the request to the server and the page to fully loading and rendering.
- Time to first byte: This is the amount time that passes between the request being sent to the server and the browser receiving the first byte of data.
Using either method, it 's always better to have a faster page. However, it 's worth noting that Google measures a page 's speed as the time to first byte, often referred to as TTFB.
Why Does Page Load Time Matter?
Web page loading speed is a crucial part of a site 's usability. Google considers page speed to be one of the 200 ranking factors that influence a website 's position in organic search results, and it definitely enriches user-experience. With numerous other websites in your niche, the competition to earn site traffic and keep people impressed with rich usability is becoming more crucial every day. If your website does not load quickly, chances are you will lose site visitors to your competition in a matter of seconds.
Having fast page load time can also boost your website 's crawl rate. The faster pages can be loaded, the more pages Google can crawl at one time. High page speed can also increase your site 's crawl demand, meaning Google will want to crawl more pages.
It's also worth noting that the hosting company and package you choose can also make or break your site speed. If, like 37% of websites globally, you're using WordPress, you may wish to opt for Managed WordPress Hosting to save you time and get advice from the experts.
How to Improve Your Page Load Time
Here are 10 quick tips aimed at optimizing your website 's loading time:
1. Optimize Image Size and Format
The images on your site can take up a lot of bandwidth, which affects the loading time of your page. It is not enough to downsize your website 's images in HTML because that only changes the appearance of the image and not its actual size. Use external picture editor tools to resize the images, such as Photoshop and set them to 72dpi.
Additionally, use image optimization tools which further compress the image to reduce its size:
- JPEG & PNG Stripper
- Smush.it
- Online Image Optimizer
- SuperGIF
For optimized loading time of your page it is ideal to stick to standard image formats such as JPG, PNG and GIF.
2. Optimize Dependencies
Plugins: A site that requires plugins may slow your page loading speed. Not all plugins are unnecessary; for example, social share plugins which are a must-have for every site these days. That said, always check to see if there is a better alternative to the plugin, such as using a CMS with built-in social plugins.
Tracking Scripts: While it is wise to keep tabs on your website 's traffic stats, it is not advisable to use multiple tracking softwares as this may hinder the page load time. If you are using a CMS such as WordPress, you should allow either WP stats to run scripts on your page or Google Analytics, but not both.
CMS Software: If you are using a CMS such as WordPress it is recommended to check frequently for updates in the software but do not load these on a live website. First carry out upgrades on a separate server to test them. Keeping abreast of software updates also improves a site 's speed.
3. Avoid Inline JS and CSS files
It is a good practice to place your website 's JS and CSS in external files. When the page loads the browser caches these files externally and reduces the page load time on subsequent requests. Moreover, having the JS and CSS files externally allows for easier site maintenance.
4. Optimize Caching
Every time a visitor loads a site, your web page 's image files, CSS and Java files load as well, taking up a lot of page load time. When caching is set up correctly, your browser can store these resources or files for subsequent requests. On repeated page loads these files can be retrieved from the cache rather than downloading them all over again from the network. This also reduces bandwidth and hosting costs.
You can use Expires headers for static components of the site and Cache-Control headers for dynamic ones. Using these headers makes the various components of a site, including images, stylesheets, scripts and flash, cacheable. This in turn minimizes HTTP requests and thus improves the page load time. With the use of Expires headers you can actually control the length of time that components of a web page can be cached, as shown in the example below:
Expires: Wed, 20 Apr 2015 20:00:00 GMT
If your server is Apache you can set the time for cached content by using the ExpiresDefault directive. This sets the expiration date as a certain number of years from the current date:
ExpiresDefault "access plus 15 years"
5. Avoid render blocking scripts
Place javascript files at the end of the body or use the 'async' attribute to load them asynchronously.
6. Avoid Redirects
Avoiding redirects increases serving speed. Some redirects are unavoidable and need to be in place but you must remember that this requires an additional HTTP which increases the page load time. Check for broken links and fix them immediately.
7. Set up G-Zip Encoding
Similar to files on your PC that are zipped and compressed to reduce the total size during online file transfers, heavy files on your website can be zipped with something called the G-Zip Compression. This saves bandwidth and download time and reduces your page loading speed. You should configure the server so that it returns zipped content.
8. Reduce HTTP Requests
Use CSS Sprites to reduce the number of image requests. Combine background images into a single image by using CSS background-image and background-position elements. Combine inline images into your cached stylesheets. Likewise, combine all your javascript files into a single file and all your CSS files as well.
9. Minification of JavaScript and CSS
Minification is the process of compressing the code by renaming variables to shorter names which helps to reduce its size and the subsequent loading time. We recommend using uglify.js for this.
10. Reduce Cookie Size
Cookies are used to store data that needs to persist between requests. This data is sent on every request and adds to the load time when it 's big. Hence, by reducing the size of the cookies you reduce the size of the data that is transferred and decrease the page load time. Eliminate unnecessary cookies or reduce the size of the cookies.
